<template>
  <div class="new-page" :style="`min-height: ${pageMinHeight}px`">
    <div class="table_box">
      <div class="table_header">
        <div class="search">
          <a-input-search
            placeholder="角色名称"
            style="width: 200px"
            v-model="searchData.name"
            @search="onSearch"
          />
        </div>
        <div class="btn">
          <a-button type="primary" @click="updata" style="margin-right:10px"> 刷新权限 </a-button>
          <a-button type="primary" @click="goadd"> 新增 </a-button>
        </div>
      </div>
      <div class="table_content">
        <a-table
          :columns="columns"
          :rowKey="(record) => record.id"
          :data-source="data"
          :pagination="pagination"
          :loading="loading"
          @change="handleTableChange"
        >
          <div slot="operation" slot-scope="text, record">
            <a-button
              type="link"
              style="color: #1890ff"
              @click="goupdata(record.id)"
              ghost
            >
              编辑
            </a-button>
            <a-button type="link" style="color: red" @click="delData(record.id)" ghost> 删除 </a-button>
          </div>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { gets,del,getRequest } from "@/services";
import { getSearchCriteria } from "../../../utils/util"
export default {
  name: "Demo",
  data() {
    return {
      columns: [
        {
          title: "角色名称",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "新建时间",
          key: "created_at",
          dataIndex: "created_at",
        },
        {
          title: "操作",
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" },
        },
      ],
      searchData:{
        name:''
      },
      pagination: {
        pageSize: 10,
      },
      loading: false,
      data: [],
    };
  },
  computed: {
    ...mapState("setting", ["pageMinHeight"]),
  },
  created() {
    this.fetch({limit:10})
  },
  methods: {
    handleTableChange(pagination, filters) {
      console.log(pagination,filters);
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.fetch({
        page: pagination.current,
        limit: pagination.pageSize,
        ...filters,
      });
    },
    fetch(params = {}) {
      this.loading = true;
      gets({
        ...params,
        ...(getSearchCriteria(this.searchData))
      },'roles').then(({ data }) => {
        if (data.code == 20000) {
        let res = data.data;
        this.data = res.data;
        this.pagination = {
          total: res.total,
        };
      }
        this.loading = false;
      });
    },
    delData(id) {
      let _this = this
      this.$confirm({
        title: "是否确定删除这条数据?",
        content: "数据删除后将无法恢复",
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          del(id,'roles').then(({ data }) => {
            if (data.code == 20000) {
              _this.$message.success("删除成功");
              console.log(_this.pagination);
              let i = 0;
              if (_this.data.length == 1) {
                i = 1;
              }
              _this.fetch({ limit: 10, page: _this.pagination.current - i });
            }
          });
        },
        onCancel() {
          console.log("Cancel");
        },
      });
    },
    updata(){
      getRequest({},'permissions/flush').then(({data})=>{
        if(data.code==20000){
          this.$message.success('刷新成功')
        }
      })
    },
    goupdata(id) {
      this.$router.push(`/user/roleInfo?id=${id}`);
    },
    goadd() {
      this.$router.push("/user/roleInfo");
      
    },
    onSearch() {
      this.fetch({limit:10})
    },
  },
};
</script>

<style scoped lang="less">
.new-page {
  height: 100%;
  background-color: @base-bg-color;
  text-align: center;
  border-radius: 4px;
  .table_box {
    padding: 16px 23px;
    .table_header {
      display: flex;
      justify-content: space-between;
      padding-bottom: 24px;
    }
  }
}
</style>